<template>
  <div class="fba-print-wrap">
    <div class="print-setting">
      <a-scrollbar style="height: 100%; overflow: auto">
        <ChoosePrintList :selectWidth="210" ref="choosePrintRef" style="margin-bottom: 10px" @getLodop="getLodop">
          <template #ipUrl>
            <p class="label">选择云主机：</p>
          </template>
          <template #bridgelabel>
            <p class="label">选择端桥：</p>
          </template>
          <template #printerlabel>
            <p class="label">选择打印机：</p>
          </template>

          <div class="flex-c mb10">
            <p class="label">打印模板：</p>
            <a-select size="small" v-model="printTemplate" style="width: 210px">
              <a-option value="defaultPrintTem" label="生产计划打印模板-系统默认"></a-option>
              <a-option value="customPrintTem" label="生产计划打印模板-定制订单"></a-option>
            </a-select>
          </div>
        </ChoosePrintList>
        <div class="set-item flex-c">
          <p class="label">打印份数：</p>
          <a-input-number size="small" v-model="printNum" :min="1" />
          <span class="unit">份</span>
        </div>
        <div class="bill-total">
          <p style="font-weight: bold; margin-bottom: 10px">打印单据：</p>
          <a-table :data="pdfList" size="mini" :bordered="{ cell: true }" :pagination="false">
            <template #columns>
              <a-table-column title="序号">
                <template #cell="{ rowIndex }">
                  <p>{{ rowIndex + 1 }}</p>
                </template>
              </a-table-column>
              <a-table-column title="单据号" data-index="billNo" />
            </template>
          </a-table>
        </div>
      </a-scrollbar>
      <div class="handle-btn-w">
        <a-space>
          <a-button class="gray-outline" size="medium" @click="closePage">取消打印</a-button>
          <a-button type="primary" size="medium" @click="toPrintPre" :loading="submitLoading">确认打印</a-button>
        </a-space>
      </div>
    </div>
    <defaultPrintTem v-if="printTemplate == 'defaultPrintTem'" ref="printTem" :choosePrintRef="choosePrintRef" @save="(list) => (pdfList = list)" />
    <customPrintTem v-else ref="printTem" :choosePrintRef="choosePrintRef" @save="(list) => (pdfList = list)" />
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import useVisitedRouteStore from '@/store/modules/visited-routes'
  import ChoosePrintList from '@/components/Print/choosePrintList.vue'
  import defaultPrintTem from './defaultPrintTem.vue'
  import customPrintTem from './customPrintTem.vue'

  const visitedRouteStore = useVisitedRouteStore()
  const route = useRoute()
  const router = useRouter()
  const submitLoading = ref(false)
  const printNum = ref(1)
  const choosePrintRef = ref()
  const pdfList = ref()
  const printTem = ref()
  const printTemplate = ref('customPrintTem')

  // 关闭界面
  function closePage() {
    visitedRouteStore.removeVisitedRoute(route)
    router.go(-1)
  }

  function getLodop(val: any) {
    printTem.value.initLODOP(val)
  }
  // 打印预览
  function toPrintPre() {
    printTem.value.toPrintPre()
  }
</script>
<style lang="less" scoped>
  .fba-print-wrap {
    display: flex;
    height: calc(100vh - @menuHeight);
    overflow: hidden;
    .print-setting {
      background-color: #fff;
      margin-right: 5px;
      height: 100%;
      flex-shrink: 0;
      width: 400px;
      position: relative;
      .arco-scrollbar {
        height: 100%;
        padding: 20px 20px 50px;
      }
      .title {
        font-size: 16px;
        margin-bottom: 20px;
        font-weight: bold;
      }
      :deep(.printer-w .label) {
        width: 100px;
        flex-shrink: 0;
        text-align: right;
        color: var(--color-text-1);
      }
      .set-item {
        margin-bottom: 15px;
        .label {
          width: 100px;
          text-align: right;
          flex-shrink: 0;
        }
        .unit {
          line-height: 30px;
          background-color: var(--color-fill-2);
          padding: 0 12px;
          margin-left: 10px;
        }
      }
      .img-size-list {
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        li {
          border: 1px solid #dadde2;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          &.active {
            border-color: rgb(var(--primary-6));
            color: rgb(var(--primary-6));
          }
        }
      }
      .handle-btn-w {
        position: absolute;
        width: 100%;
        bottom: 10px;
        right: 20px;
        display: flex;
        justify-content: flex-end;
      }
    }
    .price-type {
      font-size: 12px;
      transform: scale(0.82);
      position: relative;
      left: -4px;
    }
    .priview-w {
      background-color: #fff;
      flex: 1;
    }
  }
</style>
